<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./../../layui/css/layui.css" media="all">
    <script src="./../../layui/layui.js"></script>
    <script src="./../../js/jquery-1.8.3.min.js"></script>
    <script src="./../../js/env.js"></script>
    <title>添加充电站</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title"  >
    <legend id="aaa">充电站添加</legend>
</fieldset>
<div class="demoTable">
    <button type="button" class="layui-btn" style="margin-left: 10px;margin-bottom: 10px" onclick="javascript :history.back(-1)">返回</button>
</div>
<br>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">经维度</label>
        <div class="layui-input-block">
            <input type="text" onclick="showMap()" id="latlng" name="title" lay-verify="title" autocomplete="off" placeholder="请输入经维度" class="layui-input">
            <input type="hidden" id="lat"  >
            <input type="hidden"   id="lng"  >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">充电站名字</label>
        <div class="layui-input-block">
            <input type="text" id="stationName" name="title" lay-verify="title" autocomplete="off" placeholder="请输入充电站名字" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详情</label>
        <div class="layui-input-block">
            <textarea type="text" id="stationDetails" style="width: 473px;height: 226px;" name="title" lay-verify="title" autocomplete="off" placeholder="请输入详情" class="layui-input">
            </textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地区</label>
        <div class="layui-input-inline">
            <select id="quiz1" lay-filter="quiz1">
                <option value="0">请选择</option>
            </select>
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地点</label>
        <div class="layui-input-block">
            <input type="text" id="address" name="title" lay-verify="title" autocomplete="off" placeholder="请输入详细地点" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格单位元/度</label>
        <div class="layui-input-block">
            <input type="number" id="price" name="title" lay-verify="title" autocomplete="off" placeholder="请输入价格" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">停车费</label>
        <div class="layui-input-block">
            <input type="number" id="parkingFeeDetails" name="title" lay-verify="title" autocomplete="off" placeholder="请输入停车费" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">有无停车费</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="有"   lay-filter="haveParkingFee">
            <input type="radio" name="sex" value="0" title="无" lay-filter="haveParkingFee">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开放开始时间</label>
        <div class="layui-input-block">
            <input type="text" id="date1"   placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开放结束时间</label>
        <div class="layui-input-block">
            <input type="text"   id="date2"   placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-upload-drag" id="file1">
        <div id="file1Div">

        </div>
        <i class="layui-icon"></i>
            <p>点击上传充电站<span style="color: red">轮播图</span>，或将文件拖拽到此处</p>
    </div>

    <div class="layui-upload-drag" id="file2">
        <div id="file2Div">

        </div>
        <i class="layui-icon"></i>
            <p>点击上传充电站<span style="color: red">封面图</span>，或将文件拖拽到此处</p>
    </div>

    <button class="layui-btn"  style="margin:0 50%;" onclick="sub()" data-method="offset" type="button" align="center">保存 </button>
</form>

<script>
    if(layui.sessionData('user').userInfo===undefined){
        window.location.href = "../html/login.html"
    }
    var param={};
    layui.use(['form', 'layedit', 'laydate','upload'], function() {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        var upload = layui.upload;
        //日期
        laydate.render({
            elem: '#date1',
            type:"time"
        });
        laydate.render({
            elem: '#date2',
            type:"time"
        });

      var  area= MyAjax("GET","/admin/config/getAreaLatLog",{},getToken());
          if(area.code===0){
              var responesArea=area.data;
              for (var i = 0; i < responesArea.length; i++) {
                  $("#quiz1").append(
                      '<option value="'+responesArea[i].areaName+'">'+responesArea[i].areaName+'</option>'
                  )

              }
              form.render();
          }


        //普通图片上传1
         upload.render({
            elem: '#file1'
            ,url: abc()+'/common/file/upImg'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#file1Div').append('<img src="'+result+'" style="width: 342px;height: 136px">'); //图片链接（base64）
                });
                 layer.load(1); //风格1的加载
            }
            ,done: function(res){
                 layer.closeAll('loading');
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                 //上传成功
                if(param.bannerImg===undefined){
                    param.bannerImg=res.data;
                }else{
                    param.bannerImg= param.bannerImg+","+res.data;
                }
                return layer.msg('上传成功');
            }
        });


        //普通图片上传2
         upload.render({
            elem: '#file2'
            ,url: abc()+'/common/file/upImg'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#file2Div').html('<img src="'+result+'" style="width: 342px;height: 136px">'); //图片链接（base64）
                });
                 layer.load(1); //风格1的加载
            }
            ,done: function(res){
                 layer.closeAll('loading');
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                 param.coverImg=res.data;
                return layer.msg('上传成功');
            }
        });

        form.on('radio(haveParkingFee)', function(data){
            param.haveParkingFee=data.value; //被点击的radio的value值
        });

    });

    //弹出层
    function showMap(){
        layer.open({
            title:"鼠标点击获取经纬度",
            type: 2,
            anim: 2,
            content: "./charg_map.html" ,//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            area: ['800px', '600px']
        });
    }

    function sub(){
            param.longitude=$("#lng").val()
            param.dimensionality=$("#lat").val()
            param.stationName=$("#stationName").val()
            param.stationDetails=$("#stationDetails").val()
            param.province=  $("#quiz1").find("option:selected").text()
            param.city=  $("#quiz1").find("option:selected").text()
            param.county=  $("#quiz1").find("option:selected").text()
            param.address=  $("#address").val()
            param.price=  $("#price").val()
            param.parkingFeeDetails=  $("#parkingFeeDetails").val()
            param.openStartTime=  $("#date1").val()
            param.openEndTime=  $("#date2").val()
            var respones=MyAjax('POST','/admin/chargeStation/addAndEditStations',param,getToken());
             if(respones.code===0){
                 layer.msg("保存成功");
                 window.location.href="../charging.html";
             }
    }
</script>
</body>
</html>